<template>
    <van-nav-bar title="个人资料" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="personal">
        <div class="personal-con">
            <ul>
                <li>
                    <div class="title">
                        <p>头像</p>
                    </div>
                    <div class="per-img">
                        <img :src="user_avator" alt="" srcset="">
                        <span class="iconfont icon-youjiantou"></span>
                    </div>
                </li>
                <li>
                    <div class="title">
                        <p>用户名</p>
                    </div>
                    <div class="per-detail">
                        <p>{{ user_nickname }}</p>
                        <span class="iconfont icon-youjiantou"></span>
                    </div>
                </li>
                <li>
                    <div class="title">
                        <p>性别</p>
                    </div>
                    <div class="per-detail">
                        <p>男</p>
                        <span class="iconfont icon-youjiantou"></span>
                    </div>
                </li>
                <li>
                    <div class="title">
                        <p>手机</p>
                    </div>
                    <div class="per-detail">
                        <p>{{ store.state.tel }}</p>
                        <span class="iconfont icon-youjiantou"></span>
                    </div>
                </li>
                <li>
                    <div class="title">
                        <p>个性签名</p>
                    </div>
                    <div class="per-detail">
                        <p style="font-size: 13px;">别假装努力结局不会陪你演戏</p>
                        <span class="iconfont icon-youjiantou"></span>
                    </div>
                </li>
                <li @click="goArea">
                    <div class="title">
                        <p>收货地址</p>
                    </div>
                    <div class="per-detail">
                        <p style="font-size: 13px;">{{ store.state.addressDetail }}</p><span
                            class="iconfont icon-youjiantou"></span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="personal-btn">
            <button @click="goLogin">退出登录</button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { getAvatorNickName } from '../../request'
import { defineComponent, reactive, ref, onBeforeUnmount } from "vue";
import router from '@/router';
import store from '@/store';
// 记录图片路径
let user_avator = ref('');
let user_nickname = ref('');
// 记录旧的头像
let old_user_avator = ref('');
let preview_user_avator = ref('');
let isPreview = ref(false);
// 获取token信息
let token = sessionStorage.getItem('auto_token');

const onClickLeft = () => history.back();


getAvatorNickName({ token })
    .then(
        (content: any) => {
            let { data, code } = content;
            if (code == 200) {
                console.log("y.0", content)
                // 获取用户的昵称和头像
                user_avator.value = data[0].user_avator;
                user_nickname.value = data[0].user_nick_name;
                // 记录旧头像（目的为了给用户修改头像）
                old_user_avator.value = data[0].user_avator;
            }
        }
    )
const goLogin = () => {
    router.push({
        path: '/login'
    })
}
const goArea = () => {
    router.push({
        path: '/area'
    })
}
</script>
<style lang="scss">
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";

.personal {
    position: relative;
    width: 100%;
    height: 600px;
    background-color: #f8f8f8;
    overflow: hidden;

    .personal-con {
        width: 95%;
        margin: 0 auto;
        background-color: #fff;

        ul {
            li {
                width: 100%;
                border-bottom: 1px solid #f8f8f8;
                height: 3.2rem;
                line-height: 3.2rem;
                display: flex;
                justify-content: space-between;
                padding: 0 1rem;
                box-sizing: border-box;

                .title {
                    color: #858383;
                }

                .per-img {
                    width: 2.8rem;
                    height: 2.8rem;
                    // line-height: 2.8rem;
                    margin-right: 1.5rem;
                    display: flex;
                    margin-top: .2667rem;

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 100%;
                        box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.12);

                    }

                    span {
                        margin-left: .5333rem;
                    }
                }

                .per-detail {
                    display: flex;

                    span {
                        padding-left: .5333rem;
                    }
                }
            }
        }
    }

    .personal-btn {
        width: 95%;
        margin: 5.3333rem auto;

        button {
            width: 100%;
            display: block;
            height: 3rem;
            border-radius: 25px;
            background-color: #2b4c7e;
            color: #fff;
        }
    }
}
</style>